<template>
<q-dialog class="box-detail dialog" v-model="show" persistent>
  <q-card style="min-width: 400px">
    <q-card-section class="dialog-title bg-primary">
      <div class="text-center text-white">盒子详情</div>
    </q-card-section>
    <q-form class="q-gutter-md dialog-content">
      <q-card-section>
        <div class="form-item">
          <span class="text-right name">盒子ID：</span>
          <span class="val q-ml-sm">{{boxId}}</span>
        </div>
        <div class="form-item">
          <span class="text-right name">盒子型号：</span>
          <span class="val q-ml-sm">{{boxModel}}</span>
        </div>
        <div class="form-item">
          <span class="text-right name">盒子绑定状态：</span>
          <span class="val q-ml-sm">{{isBinding}}</span>
        </div>
<!--        <div class="form-item">-->
<!--          <span class="text-right name">状态更新时间：</span>-->
<!--          <span class="val q-ml-sm">{{updateDate}}前</span>-->
<!--        </div>-->
        <div class="form-item">
          <span class="text-right name">连接机床：</span>
          <span class="val q-ml-sm">设备编号：{{assetNumber}}</span>
        </div>
        <div class="form-item">
          <span class="text-right name">数控系统：</span>
          <span class="val q-ml-sm">{{ncType}}</span>
        </div>
        <div class="form-item">
          <span class="text-right name">所属工厂：</span>
          <span class="val q-ml-sm">{{plantName}}</span>
        </div>
        <div class="form-item">
          <span class="text-right name">录入人：</span>
          <span class="val q-ml-sm">{{operateByName}}</span>
        </div>
        <div class="form-item">
          <span class="text-right name">部署时间：</span>
          <span class="val q-ml-sm">{{deployedDate}}</span>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="center" class="dialog-footer text-center margin-t-10">
        <q-btn outline color="primary" label="关闭" @click="hideDialog"/>
      </q-card-actions>
    </q-form>
  </q-card>
</q-dialog>
</template>

<script>
import { secondToString } from 'src/assets/js/util'
export default {
  name: 'box-detail',
  data () {
    return {
      show: false,
      boxId: '', // 盒子id
      boxModel: '', // 盒子型号
      isBinding: '', // 绑定状态
      // updateDate: '', // 状态更新时间
      assetNumber: '', // 设备编号
      ncType: '', // 数控系统
      plantName: '', // 所属工厂
      operateByName: '', // 录入人
      deployedDate: '' // 部署时间
    }
  },
  methods: {
    showDialog (item) {
      this.initInfo(item)
      this.show = true
    },
    hideDialog () {
      this.show = false
    },
    initInfo (info) {
      console.log(info, 'info')
      this.boxId = info.boxID
      this.boxModel = info.boxModel
      this.isBinding = info.isBinding ? '已绑定' : '未绑定'
      // this.updateDate = this.getTime(info.updateDate)
      this.assetNumber = info.assetNumber
      this.ncType = info.ncType
      this.plantName = info.plantName
      this.operateByName = info.operateByName
      this.deployedDate = info.deployedDate
    },
    // 计算到现在的时间
    getTime (time) {
      let upDate = new Date(time)
      let now = new Date()
      return secondToString((now.getTime() - upDate.getTime()) / 1000)
    }
  }
}
</script>

<style scoped lang="stylus">
.form-item{
  .name{
    width 120px
  }
  &:last-child{
    margin-bottom 15px
  }
}
</style>
